import 'package:flutter/material.dart';
import 'package:wechat_app/pages/contact/contact.dart';
import 'package:wechat_app/pages/find/find.dart';
import 'package:wechat_app/pages/me/me.dart';
import 'package:wechat_app/pages/wechat/wechat.dart';

class Root extends StatefulWidget {
  const Root({super.key});

  @override
  State<Root> createState() => _RootState();
}

class BottomModel {
  final double width;
  final double height;
  final String label;
  final String iconName;

  BottomModel(this.width, this.height, this.label, this.iconName);
}

class _RootState extends State<Root> {
  int currentIndex = 0;

  List<BottomModel> items = [
    BottomModel(24, 21, '微信', 'msg'),
    BottomModel(26, 21, '通讯录', 'contact'),
    BottomModel(24, 24, '发现', 'find'),
    BottomModel(24, 21, '我', 'me'),
  ];
  List<Widget> pages = [Wechat(), Contact(), Find(), Me()];
  PageController pageController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        // physics：控制滑动风格
        physics: const NeverScrollableScrollPhysics(),
        controller: pageController,
        children: pages,
        onPageChanged: (value) => setState(() {
          currentIndex = value;
        }),
      ),
      bottomNavigationBar: Stack(
        children: [
          BottomNavigationBar(
            onTap: (value) {
              setState(() {
                currentIndex = value;
                // pageController控制页面跳转
                pageController.jumpToPage(currentIndex);
              });
            },
            currentIndex: currentIndex,
            backgroundColor: const Color(0xffF9F9F9),
            type: BottomNavigationBarType.fixed, //固定底部导航，当导航item大于3时必须要使用
            selectedFontSize: 10,
            unselectedFontSize: 10,
            selectedItemColor: const Color(0xff07C160),
            unselectedItemColor: const Color(0xff1C1C1C),
            items: items
                .map((item) => BottomNavigationBarItem(
                    icon: Image.asset(
                        'assets/images/bottom_${item.iconName}_c.png',
                        width: item.width,
                        height: item.height),
                    activeIcon: Image.asset(
                        'assets/images/bottom_${item.iconName}_s.png',
                        width: item.width,
                        height: item.height),
                    label: item.label))
                .toList(),
          ),
          Positioned(
              left: (MediaQuery.of(context).size.width / 4) / 2 + 3,
              top: 2,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 3),
                decoration: BoxDecoration(
                    color: const Color(0xffFA5151),
                    borderRadius: BorderRadius.circular(9)),
                child: const Text(
                  '22',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 10,
                      fontWeight: FontWeight.w600),
                ),
              ))
        ],
      ),
    );
  }
}
